<template>
	<el-dialog
		:title="title"
		class="dialog-share dialog"
		:visible.sync="dialog"
		width="680px"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
		<div class="dialog-content share-c">
			<el-form :model="queryForm" :rules="queryRules" ref="dialogForm" label-width="120px">
				<el-form-item label="查询标签名：" prop="label">
					<el-input v-model="queryForm.label" type="text" placeholder="请输入查询标签名" size="small"></el-input>
				</el-form-item>
				<el-form-item label="查询字段：" prop="fieldName">
					<el-input v-model="queryForm.fieldName" type="text" placeholder="请输入查询字段" size="small"></el-input>
				</el-form-item>
				<el-form-item label="组件类型：" prop="componentType">
					<el-select v-model="queryForm.componentType" placeholder="请选择组件类型" size="small" style="width: 100%" @change="getQueryType">
						<el-option v-for="(item, index) in typeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
					</el-select>
				</el-form-item>
				<span v-if="isDictComponent">
					<el-form-item label="数据源：">
						<el-select v-model="queryForm.dataSource" placeholder="请选择数据源" size="small" style="width: 100%">
							<el-option v-for="(item, index) in designPageJson.dataSource" :key="index" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字典标签回显：">
						<el-row>
							<el-col :span="12">
								<el-input v-model="queryForm.dictLabel" type="text" placeholder="请输入标签名" size="small"></el-input>
							</el-col>
							<el-col :span="12">
								<el-input v-model="queryForm.dictValue" type="text" placeholder="请输入标签值" size="small"></el-input>
							</el-col>
						</el-row>
					</el-form-item>
				</span>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancel(false)">取消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
  name: 'queryForm',
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	designPageJson: {
		type: Object,
		default: () => {}
	},
	info: {
		type: Object,
		default: () => {}
	},
	apiGatewayDict: {
		type: Array,
		default: () => []
	}
  },
  data() {
	return {
		hasPageForm: null,
		queryForm: {
			id: "",
			label: "",
			fieldName: "", 
			componentType: "",
			dataSource: "",
			dictLabel: "",
			dictValue: "",
			showFlag: "Y"
		},
		queryRules: {
			label: [{ required: true, message: "请输入查询标签名", trigger: "blur" }],
			fieldName:  [{ required: true, message: "请输入查询标签字段", trigger: "blur" }],
			componentType:  [{ required: true, message: "请选择组件类型", trigger: "blur" }]
		},
		typeList: this.designPageJson.pageDict.componentType,
	}
  },
  computed: {
	isDictComponent () {
		const dictComponentArray = ['vxeCodeRadio', 'vxeCodeCheckbox', 'vxeCodeSelect'];
		const isDictComponent = dictComponentArray.some(item => item === this.queryForm.componentType);
		return isDictComponent;
	}
  },
  created() {
		if (this.info) {
			this.queryForm = this.info
		}
  },
  methods: {
	// 条件设置
	getQueryType(val) {
		if (val !== 'select') {
			this.queryForm.dataType = ''
			this.queryForm.dataApi = ''
			this.queryForm.dataRequestLabel = 'label'
			this.queryForm.dataRequestValue = 'value'
		}
	},
	submitForm() {
		this.cancel(true, this.queryForm)
	},
	cancel(flag, data) { 
		// console.log(flag, data, 1111111111)
		this.$emit('queryClose', flag, data)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../fonts/TableMaking.css';
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
</style>
